<template>
  <div>
    <h3 @click="toggleExpend" class="bg-[#252836] px-2 py-2 text-light-50">
      <i :style="expendStyle" class="iconfont icon-right-s mr-1"></i>
      <span class="">{{ title }}</span>
    </h3>
    <transition
      :name="transitionName"
      @before-enter="collapseBeforeEnter"
      @enter="collapseEnter"
      @after-enter="collapseAfterEnter"
      @before-leave="collapseBeforeLeave"
      @leave="collapseLeave"
      @after-leave="collapseAfterLeave"
    >
      <div v-if="expanded" class="select-none cursor-pointer">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    transitionName: {
      type: String,
      default: 'collapse-transition',
    },
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const oldPaddingTop = ref('');
    const oldPaddingBottom = ref('');
    const oldOverflow = ref('');

    const expanded = ref(false);
    const expendStyle = computed(() => ({
      transform: expanded.value ? 'rotate(90deg)' : '',
      display: 'inline-block',
      transition: 'all .1s linear',
      transformOrigin: 'center',
    }));

    function collapseBeforeEnter(el) {
      console.log('collapseBeforeEnter :>> ', el);
    }

    function collapseEnter(el) {
      console.log('collapseEnter :>> ', el);
    }

    function collapseAfterEnter(el) {
      console.log('collapseAfterEnter :>> ', el);
    }

    function collapseBeforeLeave(el) {
      console.log('collapseBeforeEnter :>> ', el);
    }

    function collapseLeave(el) {
      console.log('collapseBeforeEnter :>> ', el);
    }

    function collapseAfterLeave(el) {
      console.log('collapseBeforeEnter :>> ', el);
    }

    function toggleExpend() {
      expanded.value = !expanded.value;
    }

    return {
      oldOverflow,
      oldPaddingBottom,
      oldPaddingTop,
      expanded,
      expendStyle,
      collapseBeforeEnter,
      collapseEnter,
      collapseAfterEnter,
      collapseBeforeLeave,
      collapseLeave,
      collapseAfterLeave,
      toggleExpend,
    };
  },
});
</script>

<style scoped>
.collapse-transition-enter-from,
.collapse-transition-leave-to {
  height: 0;
}

.collapse-transition-enter-active,
.collapse-transition-leave-active {
  overflow: hidden;
  transition: height 0.3s ease-in-out, padding 0.3s ease-in-out,
    max-height 0.3s ease-in-out;
}

.collapse-transition-enter-to,
.collapse-transition-leave-from {
  height: auto;
}
</style>
